/*
 * 一套面向响应式设计的轻量6栅格系统
 * @Author Jan
 * @Version 2021-0413
 */

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -30px;
}

.row.center {
	justify-content: center;
	/* 测试属性,垂直居中,需要搭配满宽度使用 */
	align-items: center;
}

.row > * {
	box-sizing: border-box;
	padding-left: 30px;
}

@media screen and (max-width: 768px) {
	.col-xs-1 {
		width: 16%;
	}
	.col-xs-2 {
		width: 33%;
	}
	.col-xs-3 {
		width: 49%;
	}
	.col-xs-4 {
		width: 66%;
	}
	.col-xs-5 {
		width: 83%;
	}
	.col-xs-6 {
		width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.col-sm-1 {
		width: 16%;
	}
	.col-sm-2 {
		width: 33%;
	}
	.col-sm-3 {
		width: 49%;
	}
	.col-sm-4 {
		width: 66%;
	}
	.col-sm-5 {
		width: 83%;
	}
	.col-sm-6 {
		width: 100%;
	}
}

@media screen and (min-width: 992px) {
	.col-md-1 {
		width: 16%;
	}
	.col-md-2 {
		width: 33%;
	}
	.col-md-3 {
		width: 49%;
	}
	.col-md-4 {
		width: 66%;
	}
	.col-md-5 {
		width: 83%;
	}
	.col-md-6 {
		width: 100%;
	}
}

@media screen and (min-width: 1200px) {
	.col-lg-1 {
		width: 16%;
	}
	.col-lg-2 {
		width: 33%;
	}
	.col-lg-3 {
		width: 49%;
	}
	.col-lg-4 {
		width: 66%;
	}
	.col-lg-5 {
		width: 83%;
	}
	.col-lg-6 {
		width: 100%;
	}
}
